<!DOCTYPE html>{% autoescape None %}
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;">
        <meta name="apple-mobile-web-app-capable" content="YES">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>{{ SETTINGS.TITLE }}</title>
        <link rel="stylesheet" type="text/css" href="{{ static_url }}static/css/main.css?v={{version}}">
        <script type="text/javascript" charset="utf-8">
            var Settings = function() {
                this.socketServer = '{{ WEBSOCKET_URL }}';
            }
            var is_token = {{ is_token }};
            var over_time = {{ over_time }};
            var token = "{{ SETTINGS.TOKEN }}"
            var room = "1" // 废弃
        </script>
        <link rel="stylesheet" href="{{ static_url }}static/css/common.css?v={{version}}">
        <link rel="stylesheet" href="{{ static_url }}static/css/error.css?v={{version}}">
<!--         <link rel="stylesheet" href="{{ static_url }}static/css/ranger3.css?v={{ version }}"> -->
    </head>
	<body data-twttr-rendered="true">
		<canvas id="canvas" width="1920" height="933" style="position:absolute; left:0; top: 0;"></canvas>

        <!-- 服务器断开 -->
        <article class="bg error fixed" id="dav_error" style="display: none;">
            <img src="{{ static_url }}static/images/game-on.png" alt="GAME ON" class="game-on">
            <div class="tips">
                <p class="row">Oh Oh,</p>
                <p class="row">The little tadpole got lost</p>
            </div>
            <div class="btn-row">
                <a href="/rumpetroll/" class="game-btn">
                    <div class="btn-text" data-text="Enter"></div>
                </a>
            </div>
        </article>

        <!-- 游戏结束 -->
        <!-- article 表示页面中的一块与上下文不相关的独立内容 -->
        <article class="bg error fixed" id="game_over" style="display: none;">
            <div class="tips">
                <p class="row" style="font-size:50px;text-align: center;height: 50px;line-height: 50px;margin-top: 1%;">GAMES OVER</p>
            </div>

            <div style="color: #ffbb04; height: 150px; width:500px;margin: 0 auto;">
                <img src="{{ static_url }}static/images/ranger_header.png?v={{version}}" alt="游戏结束，排名名单">
            </div>

            <div style="">
                <table style="margin:0 auto; width: 572px; border: 1px #b2dba1 solid; color: white">
                    <thead style="font-size: larger; height: 60px;">
                        <tr>
                            <th style="width: 20%;text-align:center;">排名</th>
                            <th style="width: 50%;text-align:center;">用户名</th>
                            <th style="width: 40%;text-align:center;">金币数</th>
                        </tr>
                    </thead>

                    <tbody style="text-align:center" id="sank_data">

<!--                         <tr style="height: 60px;">
                            <td style="background: url(../static/images/num1.png) no-repeat center center;">
                                1342132
                            </td>
                            <td>1234</td>
                            <td>124213</td>
                        </tr> -->
                    </tbody>
                </table>
            </div>

            <div style="margin-top: 30px;">
                <a href="/rumpetroll/">
                    <button style="display:block; margin:0 auto; border: 0;width: 200px; color: #493c1e; background-color: #d5bd84;line-height: 2.56rem;
                    font-size: 0.896rem; font-weight: bold;" id="join_game">
                        重新进入游戏
                    </button>
                </a>
            </div>
        </article>

        <img src="{{ static_url }}static/images/bk_logo_en.png?v={{version}}" alt="" class="bk-logo-en">

        <div class="music music-play" id="music_box">
            <audio src="{{ static_url }}static/shadow.mp3" preload autoplay="autoplay" id="music" loop></audio>
            <img src="{{ static_url }}static/images/music-play.png"/>
        </div>

        <div class="tip-box animated zoomInDown" id="tip_box" style="display: none;font-size:16px;" >
            <p><img src="{{ static_url }}static/images/tip-en.png" style="width:320px" alt=""></p>
        </div>

        <div class="timer-box" id="timer_box">
            <!--倒计时模块-->
            <div class="time-item" id="timer_wrapper" style="display:none;">
                <strong id="day" class="day">0Day</strong>
                <strong id="hour" class="hour">0Hour</strong>
                <strong id="minute" class="minute">0</strong>
                <strong id="second" class="second">0</strong>
                <strong id="haomiao" class="second">0</strong>
            </div>

            <!-- 在线人数 -->
            <!-- <div class="game-online-box">
                在线人数：<span class="game-online-num" id="game_online_num">0</span>
            </div> -->
        </div>
        <p class="room-num" id="room_num" style="display:none;"></p>

		<div id="ui">
			<div id="fps"></div>
            <div class="chat-box" id="chat_box">
                <input id="chat" type="text" maxlength="10" placeholder="10 characters within the message">
                <button id="submit">Submit</button>
            </div>
			<div id="chatText"></div>

			<div id="instructions"><a id="authorize-user-button"></a>
			</div>

            <aside id="frogMode">
                <h3>Frog Mode</h3>
                <section id="tadpoles">
                    <h4>Tadpoles</h4>
                    <ul id="tadpoleList">
                    </ul>
                </section>
                <section id="console">
                    <h4>Console</h4>
                </section>
            </aside>

		</div>
        <script>
            var static_url = "{{ static_url }}";
            var gotPNg = "{{ static_url }}static/images/got.png?v={{version}}";
            var goldPNg = "{{ static_url }}static/images/gold2.png?v={{version}}";
            var qqFace = "{{ static_url }}static/images/qqface/?v={{version}}";
        </script>
        <script src="{{ static_url }}static/assets/jquery.min.js?v={{version}}"></script>
        <script src="{{ static_url }}static/assets/modernizr-1.5.min.js?v={{version}}"></script>

        <script src="{{ static_url }}static/js/active_view.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/App.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Arrow.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Camera.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/formControls.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Gold.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Keys.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Message.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Model.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/music.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/parseUri.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Stats.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/Tadpole.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/TadpoleTail.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/WaterParticle.js?v={{version}}"></script>
        <script src="{{ static_url }}static/js/WebSocketService.js?v={{version}}"></script>

        <script src="{{ static_url }}static/js/main.js?v={{version}}"></script>

        <div style="position: fixed; z-index: -1; width: 1px; height: 1px; overflow: hidden; opacity: 0; bottom: 0;">
            <img src="{{ static_url }}static/images/error-bg.png?v={{version}}">
            <img src="{{ static_url }}static/images/error-text.png?v={{version}}">
            <img src="{{ static_url }}static/images/error-btn.png?v={{version}}">
        </div>

</body></html>
